<template>
  <div class="dn-registration-area">
    <div class="middle main-area" style="position: relative">
      <Spin :withIcon="true" v-if="allLoading"></Spin>
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box-area p-o-main">
        <div class="step-area flx-row-bw-c">
          <div
            class="step-item"
            :class="[
              index < step
                ? 'b-arrow3'
                : index == step
                ? 'b-arrow2'
                : 'b-arrow1',
            ]"
            v-for="(item, index) in stepList"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <template v-if="step == 0">
          <template
            v-if="
              registerList.length > 0 ||
              renewList.length > 0 ||
              transferList.length > 0
            "
          >
            <div
              class="inner-box-area"
              style="margin-bottom: 26px; position: relative"
              v-if="renewList.length > 0"
            >
              <Spin :withIcon="true" v-if="renewListLoading"></Spin>
              <h3 class="f-w-600 f-16 c-d2">域名续费清单</h3>
              <div style="padding: 0 32px">
                <table
                  class="order-table-area"
                  style="border-bottom: #dcdcdc solid 1px"
                >
                  <thead>
                    <tr class="b-b">
                      <th><div class="line-style">域名</div></th>
                      <th>
                        <div class="line-style">
                          <Select
                            :value="renewBatchYear"
                            style="width: 120px"
                            placeholder="批量选择年限"
                            @on-change="renewBatchYearChange"
                          >
                            <Option
                              v-for="item in yearList"
                              :value="item.value"
                              :key="item.value"
                              >{{ item.label }}</Option
                            >
                          </Select>
                        </div>
                      </th>
                      <th><div class="line-style">单价</div></th>
                      <th><div class="line-style">小计金额</div></th>
                      <th><div class="line-style">操作</div></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      class="b-b"
                      v-for="(item, index) in this.renewList"
                      :key="'r' + index"
                    >
                      <td>
                        <div
                          class="line-style"
                          style="justify-content: flex-start"
                        >
                          <Checkbox
                            style="color: #1c9cdf"
                            v-model="item.select"
                            @on-change="itemSelectChange($event, index, 1)"
                          ></Checkbox>
                          <span
                            class="c-d2 f-ell-sin"
                            :title="item.tradeName"
                            >{{ item.tradeName }}</span
                          >
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <Select
                            :value="item.count"
                            style="width: 120px"
                            @on-change="itemYearChange($event, index, 1)"
                          >
                            <Option
                              v-for="item in yearList"
                              :value="item.value"
                              :key="item.value"
                              >{{ item.label }}</Option
                            >
                          </Select>
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <span class="c-o"
                            >{{
                              item.activityPrice != null
                                ? item.activityPrice
                                : item.price
                            }}<span class="c-d2">元/年</span></span
                          >
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <span class="c-o">{{ item.total }}</span>
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <div
                            class="line-button"
                            @click="deleteFromCart(item.id, index, 1)"
                          >
                            移除
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div
              class="inner-box-area"
              style="margin-bottom: 26px; position: relative"
              v-if="registerList.length > 0"
            >
              <Spin :withIcon="true" v-if="registerListLoading"></Spin>
              <h3 class="f-w-600 f-16 c-d2">注册域名清单</h3>
              <div style="padding: 0 32px">
                <table
                  class="order-table-area"
                  style="border-bottom: #dcdcdc solid 1px"
                >
                  <thead>
                    <tr class="b-b">
                      <th><div class="line-style">域名</div></th>
                      <th>
                        <div class="line-style">
                          <Select
                            :value="BatchYear"
                            style="width: 120px"
                            placeholder="批量选择年限"
                            @on-change="BatchYearChange"
                          >
                            <Option
                              v-for="item in yearList"
                              :value="item.value"
                              :key="item.value"
                              >{{ item.label }}</Option
                            >
                          </Select>
                        </div>
                      </th>
                      <th><div class="line-style">单价</div></th>
                      <th><div class="line-style">小计金额</div></th>
                      <th><div class="line-style">操作</div></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      class="b-b"
                      v-for="(item, index) in this.registerList"
                      :key="'r' + index"
                    >
                      <td>
                        <div
                          class="line-style"
                          style="justify-content: flex-start"
                        >
                          <Checkbox
                            style="color: #1c9cdf"
                            v-model="item.select"
                            @on-change="itemSelectChange($event, index, 0)"
                          ></Checkbox>
                          <span
                            class="c-d2 f-ell-sin"
                            :title="item.tradeName"
                            >{{ item.tradeName }}</span
                          >
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <Select
                            :value="item.count"
                            style="width: 120px"
                            @on-change="itemYearChange($event, index, 0)"
                          >
                            <Option
                              v-for="item in yearList"
                              :value="item.value"
                              :key="item.value"
                              >{{ item.label }}</Option
                            >
                          </Select>
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <span class="c-o"
                            >{{
                              item.activityPrice != null
                                ? item.activityPrice
                                : item.price
                            }}<span class="c-d2">元/年</span></span
                          >
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <span class="c-o">{{ item.total }}</span>
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <div
                            class="line-button"
                            @click="deleteFromCart(item.id, index, 0)"
                          >
                            移除
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div
              class="inner-box-area"
              style="margin-bottom: 26px; position: relative"
              v-if="transferList.length > 0"
            >
              <Spin :withIcon="true" v-if="transferListLoading"></Spin>
              <h3 class="f-w-600 f-16 c-d2">转入域名清单</h3>
              <div style="padding: 0 32px">
                <table
                  class="order-table-area"
                  style="border-bottom: #dcdcdc solid 1px"
                >
                  <thead>
                    <tr class="b-b">
                      <th><div class="line-style">域名</div></th>
                      <th>
                        <div class="line-style">
                          <Select
                            :value="transferBatchYear"
                            style="width: 120px"
                            placeholder="批量选择年限"
                            @on-change="transferBatchYearChange"
                          >
                            <Option
                              v-for="item in yearList"
                              :value="item.value"
                              :key="item.value"
                              >{{ item.label }}</Option
                            >
                          </Select>
                        </div>
                      </th>
                      <th><div class="line-style">单价</div></th>
                      <th><div class="line-style">小计金额</div></th>
                      <th><div class="line-style">操作</div></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      class="b-b"
                      v-for="(item, index) in this.transferList"
                      :key="'r' + index"
                    >
                      <td>
                        <div
                          class="line-style"
                          style="justify-content: flex-start"
                        >
                          <Checkbox
                            style="color: #1c9cdf"
                            v-model="item.select"
                            @on-change="itemSelectChange($event, index, 2)"
                          ></Checkbox>
                          <span
                            class="c-d2 f-ell-sin"
                            :title="item.tradeName"
                            >{{ item.tradeName }}</span
                          >
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <Select
                            :value="item.count"
                            style="width: 120px"
                            @on-change="itemYearChange($event, index, 2)"
                          >
                            <Option
                              v-for="item in yearList"
                              :value="item.value"
                              :key="item.value"
                              >{{ item.label }}</Option
                            >
                          </Select>
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <span class="c-o"
                            >{{
                              item.activityPrice != null
                                ? item.activityPrice
                                : item.price
                            }}<span class="c-d2">元/年</span></span
                          >
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <span class="c-o">{{ item.total }}</span>
                        </div>
                      </td>
                      <td>
                        <div class="line-style">
                          <div
                            class="line-button"
                            @click="deleteFromCart(item.id, index, 2)"
                          >
                            移除
                          </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div
              class="inner-box-area"
              v-if="registerList.length > 0 || transferList.length > 0"
            >
              <h3 class="f-w-600 f-16 c-d2" style="margin-bottom: 10px">
                注册局要求，域名购买时必须填写完整的用户信息方可注册。<template
                  v-if="myTemplateList != null && myTemplateList.length > 0"
                >
                  以下为您曾经使用过的域名信息，您可以直接使用：</template
                >
              </h3>
              <span
                class="f-16 f-w-400 c-g"
                v-if="myTemplateList != null && myTemplateList.length > 0"
                >使用已实名的信息模板注册后不需要在提交实名，可在信息模板中<span
                  class="c-b"
                  >创建</span
                >和管理</span
              >
              <div style="position: relative; margin-top: 10px">
                <Spin :withIcon="true" v-if="selectLoading"></Spin>
                <div class="b-b-d flx-row-s-c" style="margin-bottom: 20px">
                  <span class="f-14 c-d2">模板名称：</span>
                  <Input
                    v-model.trim="name"
                    placeholder="请输入"
                    maxlength="30"
                    style="width: 180px"
                  />
                  <div
                    class="user-strong-button small-code-button"
                    style="margin: 0 10px 0 30px"
                    @click="pageChange(1)"
                  >
                    搜索
                  </div>
                  <div
                    class="user-normal-button small-code-button"
                    @click="reset"
                  >
                    重置
                  </div>
                </div>
                <RadioGroup
                  class="w-p-100"
                  v-model="TemplateSelect"
                  v-if="myTemplateList != null && myTemplateList.length > 0"
                >
                  <table class="order-table-area" style="margin-top: 20px">
                    <tbody>
                      <tr
                        v-for="(item, index) in myTemplateList"
                        :key="'t' + index"
                        :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
                      >
                        <td>
                          <div class="line-style">
                            <Radio
                              :label="item.id"
                              class="flx-row-s-c"
                              style="display: flex"
                            >
                              <span
                                class="strong-f f-ell-sin"
                                :title="item.name"
                                >{{ item.name }}</span
                              >
                            </Radio>
                          </div>
                        </td>
                        <td>
                          <div class="line-style">
                            <span class="c-d2">{{
                              item.type == 0 ? "个人" : "企业"
                            }}</span>
                          </div>
                        </td>
                        <td>
                          <div class="line-style">
                            <span
                              class="strong-f f-ell-sin"
                              :title="
                                item.type == 0
                                  ? item.locName
                                  : item.locBusinessName
                              "
                              >{{
                                item.type == 0
                                  ? item.locName
                                  : item.locBusinessName
                              }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <div class="line-style">
                            <span class="c-d2">已实名认证</span>
                          </div>
                        </td>
                        <td>
                          <div class="line-style">
                            <div
                              class="line-button"
                              style="margin-right: 10px"
                              @click="showTemplateDetailModal(item)"
                            >
                              查看
                            </div>
                            <div
                              class="line-button"
                              @click="deleteItem(item.id, index)"
                            >
                              删除
                            </div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </RadioGroup>
                <template-detail-modal
                  :show.sync="templateDetailModalShow"
                  :info="templateDetailInfo"
                ></template-detail-modal>
                <Empty-State
                  :noPadding="true"
                  style="background-color: #fff; padding: 30px"
                  v-if="myTemplateList != null && myTemplateList.length <= 0"
                  content="未搜索到任何内容！"
                ></Empty-State>
                <div class="flx-row-e-c" style="margin-top: 20px">
                  <Page
                    :total="tTotal"
                    :current="page"
                    :page-size="pageSize"
                    @on-change="pageChange"
                    show-elevator
                    show-total
                  />
                </div>
              </div>
              <div
                class="user-normal-button big-button-size"
                style="width: 157px; margin-top: 30px"
                @click="toCreateTemplate"
              >
                创建新的模板信息
              </div>
            </div>
          </template>
          <Empty-State
            style="background-color: #fff"
            v-if="
              registerList.length <= 0 &&
              renewList.length <= 0 &&
              transferList.length <= 0
            "
            content="购物车空空如也，快去添加吧！！"
          ></Empty-State>
        </template>
        <template v-else-if="step == 1">
          <h3 class="f-w-600 f-16 c-d2" style="margin-bottom: 10px">
            订单详情
          </h3>
          <div class="box-shadow">
            <table class="table-area">
              <thead>
                <tr>
                  <th>
                    <div class="line-style">订单编号</div>
                  </th>
                  <th>
                    <div class="line-style">订单金额</div>
                  </th>
                  <th>
                    <div class="line-style">应付金额</div>
                  </th>
                  <th>
                    <div class="line-style">下单时间</div>
                  </th>
                  <th>
                    <div class="line-style">操作项</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, index) in orderList"
                  :key="'or' + index"
                  :class="[(index + 1) % 2 != 0 ? 'lc-f' : 'lc-F9FAFB']"
                >
                  <td>
                    <div class="line-style">
                      <span class="normal-f" :title="item.orderNo">{{
                        item.orderNo
                      }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span class="normal-f f-ell-sin">{{ item.total }}元</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span class="c-o">{{ item.payAmount }}元</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span class="normal-f">{{ item.createdTime }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <div
                        class="line-button"
                        @click="showOrderDetailModal(item.orderNo)"
                      >
                        订单详情
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <template v-if="orderList != null && orderList.length > 0">
            <h3 class="f-w-600 f-16 c-d2" style="margin: 40px 0">
              请选择支付方式
            </h3>
            <div class="flx-col-s-c" style="position: relative">
              <Spin :withIcon="true" v-if="payLoading"></Spin>
              <div class="flx-row-s-c">
                <div
                  class="pay-item box-shadow flx-row-c-c"
                  :class="{ active: payWay == 0 }"
                  @click="changePayWay(0)"
                >
                  <div class="p-i-1"></div>
                  <span class="c-d2" style="margin-left: 10px">微信支付</span>
                </div>
                <pay-code-modal
                  type="1"
                  :show.sync="wechatPayModalShow"
                  :codeUrl="wechatPayCode"
                ></pay-code-modal>
                <div
                  class="pay-item box-shadow flx-row-c-c"
                  :class="{ active: payWay == 1 }"
                  style="margin: 0 30px"
                  @click="changePayWay(1)"
                >
                  <div class="p-i-2"></div>
                  <span class="c-d2" style="margin-left: 10px">支付宝支付</span>
                </div>
                <pay-code-modal
                  type="2"
                  :show.sync="zhifubaoPayModalShow"
                  :codeUrl="zhifubaoPayCode"
                ></pay-code-modal>
                <div
                  class="pay-item box-shadow flx-col-c-c"
                  :class="{ active: payWay == 2 }"
                  @click="changePayWay(2)"
                >
                  <span class="f-14 c-d2"
                    >余额支付（余额￥{{ $store.state.user.balance }}）</span
                  >
                  <span
                    class="c-g"
                    v-if="
                      parseFloat($store.state.user.balance) <
                        orderList[0].payAmount ||
                      parseFloat($store.state.user.balance) == 0
                    "
                  >
                    余额已不足支付
                    <span class="c-b" style="cursor: pointer" @click="recharge"
                      >充值</span
                    ></span
                  >
                </div>
              </div>
              <div
                class="user-strong-button big-button-size"
                style="margin: 50px auto 40px"
                @click="payEvent"
              >
                立即支付
              </div>
              <span class="c-o"
                >温馨提示：由于域名的时效性，订单如未及时支付结算，有可能会出现结算失败。为避免照成损失，请及时支付</span
              >
            </div>
          </template>
        </template>
        <template v-else-if="step == 2">
          <div style="min-height: 400px">
            <div class="flx-col-s-c" style="margin-bottom: 30px">
              <div class="flx-row-c-c" style="height: 200px">
                <div class="success-icon"></div>
                <span class="c-d2 f-16 f-w-600">恭喜你，已支付成功！</span>
              </div>
              <!-- <span class="c-o"
                >温馨提示：由于域名的时效性，订单如未及时支付结算，有可能会出现结算失败。为避免照成损失，请及时支付</span
              > -->
            </div>
            <div
              class="flx-row-s-c line-item c-d2"
              v-for="(item, index) in resList"
              :key="'res' + index"
            >
              <span class="url f-16 f-w-600"
                >{{ item.domainName
                }}{{
                  item.type == 0
                    ? "（注册）"
                    : item.type == 1
                    ? "（续费）"
                    : item.type == 2
                    ? "（转入）"
                    : ""
                }}</span
              >
              <span class="content f-16 f-w-600">{{
                item.status == 1
                  ? "处理中"
                  : item.status == 2
                  ? "成功"
                  : item.status == 3
                  ? "失败"
                  : ""
              }}</span>
              <template v-if="item.status == 2">
                <div class="button-item b-r" @click="toManage">管理</div>
                <div
                  class="button-item"
                  @click="toBatchAnalysis(item.id, item.domainName)"
                >
                  解析
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
      <div
        v-if="
          step == 0 &&
          (select.registerSelectNum > 0 ||
            select.renewSelectNum > 0 ||
            select.transferSelectNum > 0)
        "
        class="box-area p-o-main flx-row-s-c c-d2 f-14"
        style="margin-top: 30px"
      >
        <div class="flx-col-s-s">
          <span style="margin-right: 35px" v-if="select.renewSelectNum > 0"
            >续费域名数量{{ select.renewSelectNum }}个</span
          >
          <span style="margin-right: 35px" v-if="select.registerSelectNum > 0"
            >注册域名数量{{ select.registerSelectNum }}个</span
          >
          <span style="margin-right: 35px" v-if="select.transferSelectNum > 0"
            >转入域名数量{{ select.transferSelectNum }}个</span
          >
        </div>

        <span style="margin-right: 35px"
          >总计：<span class="f-16 f-w-600">{{ select.total }}</span
          >元</span
        >
        <div
          class="user-strong-button big-button-size"
          style="margin-right: 45px"
          @click="createOrder"
        >
          立即购买
        </div>
        <div class="flx-row-s-c check-area">
          <Checkbox v-model="agree"></Checkbox>
          我已阅读并同意
          <span class="b-form-font-button" @click="ruleModelShow = true">《{{ ruleTitle }}》</span></p>
          和
         <span class="b-form-font-button" @click="privacyStatementModelShow = true">《{{ privacyStatementTitle }}》</span></p>
        </div>
      </div>
    </div>
    <rule-modal :show.sync="ruleModelShow" :content="ruleContent" :title="ruleTitle"></rule-modal>
    <rule-modal :show.sync="privacyStatementModelShow" :content="privacyStatementContent" :title="privacyStatementTitle"></rule-modal>
    <order-detail-modal
      :show.sync="orderDetailModalShow"
      :sucList="orderDetailList"
    ></order-detail-modal>
  </div>
</template>

<script>
import {
  changeCartCount,
  getShoppingCart,
  deleteFromShoppingCart,
  getTemplateSelectList,
  createCartOrder,
  pay,
  deleteTemplate,
  getOrderDetail,
} from "@/api/user";
import axios from "axios";
const bottomInfoUrl =
  process.env.NODE_ENV === "development"
    ? config2.bottomInfoUrl.dev
    : config2.bottomInfoUrl.pro;
const webScoketUrl =
  process.env.NODE_ENV === "development"
    ? config2.webScoketUrl.dev
    : config2.webScoketUrl.pro;
import Tools from "@/utils/tools";
export default {
  name: "VipPlaceorder",
  components: {
    payCodeModal: () => import("_c/modal/payCodeModal/payCodeModal.vue"),
    templateDetailModal: () =>
      import("_c/modal/templateDetailModal/templateDetailModal.vue"),
    ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
    OrderDetailModal: () =>
      import("_c/modal/orderDetailModal/orderDetailModal.vue"),
  },
  data() {
    return {
      ruleModelShow: false,
      ruleContent: "",
      ruleTitle: "",
      privacyStatementModelShow: false,
      privacyStatementContent: "",
      privacyStatementTitle: "",
      renewListLoading: false,
      registerListLoading: false,
      transferListLoading: false,
      selectLoading: false,
      allLoading: false,
      payLoading: false,
      resultLoading: false,
      breadCrumb: [{ name: "购物车", to: "/po" }],
      stepList: ["1.确认订单", "2.在线支付", "3.支付成功"],
      step: 0,
      registerDate: null,

      // 模板分页设置
      name: "",
      tTotal: null,
      pageSize: 10,
      page: 1,

      // 确认订单数据
      yearList: [
        {
          value: 1,
          label: "1年",
        },
        {
          value: 2,
          label: "2年",
        },
        {
          value: 3,
          label: "3年",
        },
        {
          value: 4,
          label: "4年",
        },
        {
          value: 5,
          label: "5年",
        },
        {
          value: 6,
          label: "6年",
        },
        {
          value: 7,
          label: "7年",
        },
        {
          value: 8,
          label: "8年",
        },
        {
          value: 9,
          label: "9年",
        },
        {
          value: 10,
          label: "10年",
        },
      ],
      BatchYear: null,
      registerList: [],
      transferBatchYear: null,
      transferList: [],
      renewBatchYear: null,
      renewList: [],
      myTemplateList: null,
      registerSelectNum: 0,
      total: 0,
      TemplateSelect: null,
      agree: false,

      templateDetailModalShow: false,
      templateDetailInfo: null,

      // 在线支付数据
      orderList: [],
      payWay: 0,
      outTradeNo: null,
      orderDetailList: [],
      orderDetailModalShow: false,

      //弹出框
      wechatPayModalShow: false,
      wechatPayCode: "",
      zhifubaoPayModalShow: false,
      zhifubaoPayCode: "",
      paying: false,
      resList: [],
    };
  },
  created() {
    if (this.$route.query.no) {
      this.outTradeNo = this.$route.query.no;
      this.getDetail();
    }
    this.getShoppingCart();
    this.getTemplateSelectList();
    this.getRule();
  },
  methods: {
    // 获取协议
    getRule() {
      axios(`${bottomInfoUrl}/domainNameRegisterRules.json`).then((res) => {
        if (res != null && res.data != null) {
          this.ruleTitle = res.data.title;
          this.ruleContent = res.data.content;
        }
      });
      axios(`${bottomInfoUrl}/privacyStatement.json`).then((res) => {
        if (res != null && res.data != null) {
          this.privacyStatementTitle = res.data.title;
          this.privacyStatementContent = res.data.content;
        }
      });
    },
    // 获取详情
    async getDetail() {
      if (!this.outTradeNo) return;
      this.allLoading = false;
      let res = await getOrderDetail({
        orderNo: this.outTradeNo,
      });
      if (res.code == 200) {
        this.orderList = [
          {
            orderNo: res.data.outTradeNo,
            total: res.data.total,
            payAmount: res.data.amount,
            createdTime: res.data.createdTime,
          },
        ];
        this.orderDetailList = res.data.list;
        this.step = 1;
      }
      this.allLoading = false;
    },
    // 展示模板
    showTemplateDetailModal(item) {
      this.templateDetailInfo = item;
      this.templateDetailModalShow = true;
    },
    // 获取购物车
    async getShoppingCart() {
      let res = await getShoppingCart();
      if (res.code == 200) {
        this.$store.commit("setBalance", res.data.balance);
        if (res.data.list != null && res.data.list.length > 0) {
          for (let item of res.data.list) {
            if (item.type == 0) {
              this.registerList = item.voList.map((listItem) => {
                return { ...listItem, select: true };
              });
            } else if (item.type == 1) {
              this.renewList = item.voList.map((listItem) => {
                return { ...listItem, select: true };
              });
            } else if (item.type == 2) {
              this.transferList = item.voList.map((listItem) => {
                return { ...listItem, select: true };
              });
            }
          }
          // let cartNumber =
          //   this.registerList.length +
          //   this.renewList.length +
          //   this.transferList.length;
          // this.$store.commit("setCartNumber", cartNumber);
        }
      }
    },
    // 续费批量修改年限
    async renewBatchYearChange(value) {
      this.renewListLoading = true;
      let data = {
        count: value,
        shoppingCartIds: this.renewList.map((item) => item.id),
      };
      let res = await changeCartCount(data);
      if (res.code == 200) {
        for (let i in this.renewList) {
          this.renewList[i].count = value;
          this.renewList[i].total = Tools.accMul(
            this.renewList[i].activityPrice != null
              ? this.renewList[i].activityPrice
              : this.renewList[i].price,
            value
          );
        }
      }
      this.renewListLoading = false;
    },
    // 注册批量修改年限
    async BatchYearChange(value) {
      this.registerListLoading = true;
      let data = {
        count: value,
        shoppingCartIds: this.registerList.map((item) => item.id),
      };
      let res = await changeCartCount(data);
      if (res.code == 200) {
        for (let i in this.registerList) {
          this.registerList[i].count = value;
          this.registerList[i].total = Tools.accMul(
            this.registerList[i].activityPrice != null
              ? this.registerList[i].activityPrice
              : this.registerList[i].price,
            value
          );
        }
      }
      this.registerListLoading = false;
    },
    // 转入批量修改年限
    async transferBatchYearChange(value) {
      this.transferListLoading = true;
      let data = {
        count: value,
        shoppingCartIds: this.transferList.map((item) => item.id),
      };
      let res = await changeCartCount(data);
      if (res.code == 200) {
        for (let i in this.transferList) {
          this.transferList[i].count = value;
          this.transferList[i].total = Tools.accMul(
            this.transferList[i].activityPrice != null
              ? this.transferList[i].activityPrice
              : this.transferList[i].price,
            value
          );
        }
      }
      this.transferListLoading = false;
    },
    // 单个域名改变年限
    async itemYearChange(value, index, type) {
      if (type == 0) {
        this.registerListLoading = true;
        let data = {
          count: value,
          shoppingCartIds: [this.registerList[index].id],
        };
        let res = await changeCartCount(data);
        if (res.code == 200) {
          this.registerList[index].count = value;
          this.registerList[index].total = Tools.accMul(
            this.registerList[index].activityPrice != null
              ? this.registerList[index].activityPrice
              : this.registerList[index].price,
            value
          );
        }
        this.registerListLoading = false;
      } else if (type == 1) {
        this.renewListLoading = true;
        let data = {
          count: value,
          shoppingCartIds: [this.renewList[index].id],
        };
        let res = await changeCartCount(data);
        if (res.code == 200) {
          this.renewList[index].count = value;
          this.renewList[index].total = Tools.accMul(
            this.renewList[index].activityPrice != null
              ? this.renewList[index].activityPrice
              : this.renewList[index].price,
            value
          );
        }
        this.renewListLoading = false;
      } else if (type == 2) {
        this.transferListLoading = true;
        let data = {
          count: value,
          shoppingCartIds: [this.transferList[index].id],
        };
        let res = await changeCartCount(data);
        if (res.code == 200) {
          this.transferList[index].count = value;
          this.transferList[index].total = Tools.accMul(
            this.transferList[index].activityPrice != null
              ? this.transferList[index].activityPrice
              : this.transferList[index].price,
            value
          );
        }
        this.transferListLoading = false;
      }
    },
    // 移除
    deleteFromCart(id, index, type) {
      this.$Modal.confirm({
        title: "移除确认",
        content: "<p>确定要移除此域名吗？</p>",
        onOk: async () => {
          if (type == 0) {
            this.registerListLoading = true;
            let res = await deleteFromShoppingCart([id]);
            if (res.code == 200) {
              this.$Message.success("移除成功！");
              this.registerList.splice(index, 1);
            }
            this.registerListLoading = false;
          } else if (type == 1) {
            this.renewListLoading = true;
            let res = await deleteFromShoppingCart([id]);
            if (res.code == 200) {
              this.$Message.success("移除成功！");
              this.renewList.splice(index, 1);
            }
            this.renewListLoading = false;
          } else if (type == 2) {
            this.transferListLoading = true;
            let res = await deleteFromShoppingCart([id]);
            if (res.code == 200) {
              this.$Message.success("移除成功！");
              this.transferList.splice(index, 1);
            }
            this.transferListLoading = false;
          }
        },
      });
    },
    // item选择改变
    itemSelectChange(res, index, type) {
      if (type == 0) {
        this.registerList[index].select = res;
      } else if (type == 1) {
        this.renewList[index].select = res;
      } else if (type == 2) {
        this.transferList[index].select = res;
      }
    },
    // 获取我的模板列表
    async getTemplateSelectList() {
      this.selectLoading = true;
      let params = {
        page: this.page,
        limit: this.pageSize,
      };
      if (this.name) {
        params.name = this.name;
      }
      let res = await getTemplateSelectList(params);
      if (res.code == 200) {
        this.TemplateSelect = null;
        this.myTemplateList = res.data.list;
        this.tTotal = res.data.total;
      }
      this.selectLoading = false;
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getTemplateSelectList();
    },
    // 重置
    reset() {
      this.name = "";
      this.page = 1;
      this.getTemplateSelectList();
    },
    // 跳转到添加模板
    toCreateTemplate() {
      this.$storage.setFromPo(true);
      window.location.href = "/user/template/add";
    },
    // 创建订单
    async createOrder() {
      let registerSelectList = this.registerList.filter((item) => item.select);
      let renewSelectList = this.renewList.filter((item) => item.select);
      let transferSelectList = this.transferList.filter((item) => item.select);
      let list = registerSelectList
        .concat(renewSelectList)
        .concat(transferSelectList);
      if (list == null || list.length <= 0) {
        this.$Message.warning("请至少选择一个域名！");
        return;
      }
      if (
        (registerSelectList.length > 0 && !this.TemplateSelect) ||
        (transferSelectList.length > 0 && !this.TemplateSelect)
      ) {
        this.$Message.warning("请选择模板！");
        return;
      }
      if (!this.agree) {
        this.$Message.warning(
          "请阅读并同意《190域名注册协议》和《190隐私声明》！"
        );
        return;
      }
      this.allLoading = true;
      let data = {
        shoppingCartIds: list.map((item) => item.id),
      };
      if (registerSelectList.length > 0 || transferSelectList.length > 0) {
        data.templateId = this.TemplateSelect;
      }
      let res = await createCartOrder(data);
      if (res.code == 200) {
        this.$store.commit("setBalance", res.data.balance);
        this.orderList = res.data.list;
        this.step = 1;
      }
      this.allLoading = false;
    },
    // 改变支付方式
    changePayWay(id) {
      if (this.payWay == id) return;
      if (
        id == 2 &&
        (parseFloat(this.$store.state.user.balance) < this.sumPayable ||
          parseFloat(this.$store.state.user.balance) == 0)
      )
        return;
      this.payWay = id;
    },
    // 支付
    async payEvent() {
      this.payLoading = true;
      let data = {
        outTradeNo: this.orderList[0].orderNo,
        source: 0,
        type: this.payWay,
      };
      let res = await pay(data);
      if (res.code == 200) {
        if (!this.paying) {
          this.paying = true;
          this.startSocket();
        }
        if (this.payWay == 0) {
          this.wechatPayCode = res.data;
          this.wechatPayModalShow = true;
          this.payLoading = false;
        } else if (this.payWay == 1) {
          this.zhifubaoPayCode = res.data;
          this.zhifubaoPayModalShow = true;
          this.payLoading = false;
        }
      } else {
        this.payLoading = false;
      }
    },
    // 跳转到recharge
    recharge() {
      window.location.href = "";
    },
    // 跳转到管理
    toManage() {
      window.location.href = "/user/mydn";
    },
    // 跳转到解析
    toBatchAnalysis(id, domainName) {
      window.location.href = `/user/mydn/batchAnalysis/${id}/${domainName}`;
    },
    // webScoket发送消息
    sendMessage(txt) {
      this.webSocket.send(txt);
    },
    // webScoket异常重连
    resetConnect() {
      this.connectCount = this.connectCount || 0;
      if (!this.webSocketInterval) {
        // console.log("开始webSocket重连");
        this.webSocketResetInterval = setInterval(() => {
          // console.log(this.connectCount);
          this.connectCount += 1;
          if (this.connectCount <= 5) {
            this.startSocket();
            this.webSocketResetInterval &&
              clearInterval(this.webSocketResetInterval);
          }
        }, 1000);
      }
    },
    // 开启webScoket
    startSocket() {
      this.messageTotal = 0;
      this.webSocket = new WebSocket(
        `${webScoketUrl}/web/webSocket/domainpay/${
          this.orderList[0].orderNo
        }/${this.$token.get()}`
      );
      // 接收消息事件
      this.webSocket.onmessage = (e) => {
        // console.log(e);
        if (e.data === "open:suc") {
          this.sendMessage("start");
          this.heartInterval = setInterval(() => {
            if (this.messageTotal === 10) {
              this.sendMessage("heart");
              this.messageTotal = 0;
            }
            this.messageTotal += 1;
          }, 1000);
        }
        if (e.data.indexOf("msg:") != -1) {
          let message = e.data.split("msg:")[1];
          this.messageTotal = 0;
          let info = JSON.parse(message);
          if (info != null && info.length != null && info.length > 0) {
            if (this.step != 2) {
              this.step = 2;
              this.paying = false;
            }
            this.resList = info;
          }
        }
        if (e.data.indexOf("rec:stop") != -1) {
          this.webSocket.close();
        }
      };
      // 关闭事件
      // this.webSocket.onclose = () => {
      //   this.resetConnect();
      // };
      // 连接失败事件
      this.webSocket.onerror = () => {
        this.resetConnect();
      };
    },
    // 删除模板
    deleteItem(id, index) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除此模板吗？</p>",
        onOk: async () => {
          let res = await deleteTemplate(id);
          if (res.code == 200) {
            this.$Message.success("删除成功！");
            this.myTemplateList.splice(index, 1);
          }
        },
      });
    },
    // 显示订单详情
    async showOrderDetailModal(id) {
      if (this.orderDetailList.length == 0) {
        this.allLoading = false;
        let res = await getOrderDetail({
          orderNo: id,
        });
        if (res.code == 200) {
          this.orderDetailList = res.data.list;
        }
        this.allLoading = false;
      }
      this.orderDetailModalShow = true;
    },
  },
  computed: {
    select() {
      let total = 0,
        registerSelectNum = 0,
        renewSelectNum = 0,
        transferSelectNum = 0;
      for (let item of this.registerList) {
        if (item.select) {
          registerSelectNum++;
          total = Tools.accAdd(total, item.total);
        }
      }
      for (let item of this.renewList) {
        if (item.select) {
          renewSelectNum++;
          total = Tools.accAdd(total, item.total);
        }
      }
      for (let item of this.transferList) {
        if (item.select) {
          transferSelectNum++;
          total = Tools.accAdd(total, item.total);
        }
      }
      return { registerSelectNum, renewSelectNum, transferSelectNum, total };
    },
  },
  beforeDestroy() {
    //销毁定时器
    if (this.webSocket) {
      this.sendMessage("stop");
    }
    this.heartInterval && clearInterval(this.heartInterval);
    this.webSocketResetInterval && clearInterval(this.webSocketResetInterval);
  },
};
</script>

<style lang="scss" scoped>
.dn-registration-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box-area {
    width: 100%;
    background-color: #fff;
  }
  .inner-box-area {
    border: 1px solid #dcdcdc;
    padding: 26px;
  }
  .order-table-area {
    width: 100%;
    table-layout: auto;
    box-sizing: border-box;

    .line-style {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0 10px;
    }

    .b-b {
      border-bottom: 1px solid #dcdcdc;
    }
  }
  .p-o-main {
    padding: 35px 26px;
    .step-area {
      margin-bottom: 32px;

      .step-item {
        @include size(377px, 34px);
        @include bg-setting(null, contain, center);
        color: #fff;
        text-align: center;
        line-height: 34px;
        font-size: 16px;

        &.b-arrow1 {
          background-image: url("~_a/images/b-arrow1@2x.png");
        }
        &.b-arrow2 {
          background-image: url("~_a/images/b-arrow2@2x.png");
        }
        &.b-arrow3 {
          background-image: url("~_a/images/b-arrow3@2x.png");
        }
      }
    }
  }
  .pay-item {
    @include size(190px, 72px);
    border: transparent solid 1px;
    transition: border-color 0.3s, background-color 0.3s;
    border-radius: 4px;
    &:hover {
      border-color: #f9521f;
    }
    &.active {
      background-color: #fedcd2;
      border-color: #f9521f;
      @include bg-setting("select2", 16px 13px, right bottom);
    }
  }
  .p-i-1 {
    @include size(28px, 25px);
    @include bg-setting("p-i-2");
  }
  .p-i-2 {
    @include size(25px, 26px);
    @include bg-setting("p-i-1");
  }
  .success-icon {
    @include size(48px);
    margin-right: 30px;
    @include bg-setting("pay-success");
  }
  .line-item {
    border-bottom: #eeeeee solid 1px;
    line-height: 60px;

    .url {
      padding: 0 20px;
      min-width: 260px;
      flex-shrink: 0;
    }
    .content {
      width: 100%;
    }
    .button-item {
      line-height: 26px;
      padding: 0 17px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .b-r {
      border-right: #dcdcdc solid 1px;
    }
  }
}
.line-button {
  @include h-c(null, null, #3d3d3d, $mainColor);
  cursor: pointer;
}
</style>
